<template>
  <div class="comicResultSubject">
    <div class="comicResuleHeader">
      <van-icon name="arrow-left" @click="returnPage" />
      <font v-if="searchOkind === 1">{{ kindName }}</font>
      <div v-if="searchOkind === 2" class="search">
        <van-search v-model="searchValue" placeholder="请输入搜索关键词" />
      </div>
    </div>
    <div class="comicResuleMain">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="item in comicList" :key="item.id">
          <div class="img">
            <img :src="item.imgPath" alt="" @click="toComicInfo(item.id)" />
          </div>
          <div class="info" @click="toComicInfo(item.id)">
            <font class="title">{{ item.title }}</font>
            <font class="autor">作者:{{ item.autor }}</font>
            <font class="chapter">更新至{{ item.lastChapter }}章</font>
            <div class="lable">
              <van-tag
                type="primary"
                v-for="(label, index) in item.labelList"
                :key="index"
                >{{ label }}</van-tag
              >
            </div>
          </div>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      kindName: '',
      searchOkind: 1,
      searchValue: '',
      comicList: [],
      loading: false,
      finished: false
    };
  },
  created () {
    var distinguish = this.$route.query.distinguish;

    if (distinguish === 'kind') {
      var kind = this.$route.query.kind;
      this.kindName = kind;
      this.searchOkind = 1;
    } else if (distinguish === 'search') {
      this.searchOkind = 2;
      var value = this.$route.query.value;
      this.searchValue = value;
    }
    for (var i = 0; i < 15; i++) {
      this.comicList.push({ id: i + 1, imgPath: 'http://mhfm3tel.cdndm5.com/34/33771/20180727110326_180x240.jpg', title: '妖神记', autor: '集英社', lastChapter: '206', labelList: ['冒险', '玄幻'] });
    }
  },
  methods: {
    returnPage () {
      this.$router.go(-1);
    },
    onLoad () {
      var size = this.comicList.length;
      console.log(size);
      for (var i = size; i < size + 15; i++) {
        var obj = { id: i + 1, imgPath: 'http://mhfm3tel.cdndm5.com/34/33771/20180727110326_180x240.jpg', title: '妖神记', autor: '集英社', lastChapter: '206', labelList: ['冒险', '玄幻'] };
        this.comicList.push(obj);
      }
      this.loading = false;
      if (this.comicList.length > 60) {
        this.finished = true;
      }
    },
    toComicInfo (value) {
      this.$router.push({
        path: '/comicInfo',
        query: {
          id: value
        }

      });
    }
  }
};
</script>

<style lang="less" scoped>
.comicResultSubject {
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
}
.comicResultSubject .comicResuleHeader {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  i {
    font-size: 30px;
  }
  font {
    font-size: 20px;
    font-weight: bold;
  }
  .search {
    height: 100%;
    width: 80%;
    display: flex;
    align-items: center;
    margin-left: 5px;
    .van-search {
      padding: 0;
      width: 100%;
    }
  }
}
.comicResultSubject .comicResuleMain {
  width: 100%;
  flex: 1;
  background-color: #ffffff;
  margin-top: 5px;
  overflow: auto;
  /deep/ .van-list {
    .van-cell {
      height: 150px;
      .van-cell__value {
        display: flex !important;
        flex-direction: row;
        .img {
          height: 100%;
          width: 97px;
          float: left;
          overflow: hidden;
          border-radius: 5px;
          img {
            height: 100%;
          }
        }
        .info {
          float: left;
          height: 100%;
          flex: 1;
          margin-left: 10px;
          .title {
            margin-top: 5px;
            font-size: 18px;
            font-weight: bold;
            display: block;
            width: 100%;
          }
          .autor {
            margin-top: 20px;
            font-size: 14px;
            display: block;
            width: 100%;
            color: #a7a7a7;
          }
          .chapter {
            font-size: 14px;
            display: block;
            width: 100%;
            color: #a7a7a7;
          }
          .lable {
            .van-tag {
              margin-right: 5px;
            }
          }
        }
      }
    }
  }
}
</style>
